<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <title>新华保险-新春欢乐五重奏</title>
    <script>
    var ua = window.navigator.userAgent.toLowerCase();
    if ( !(ua.match(/MicroMessenger/i) == 'micromessenger') ) {
        alert('请使用微信登录');
    }
    </script>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper" id="wrapper">
            <div class="swiper-slide page1">
                <img class="animated Down logo" src="images/1-7.png">
                <img src="images/1-12.png" class="animateSelf animate1" alt="">
                <img src="images/1-11.png" class="animateSelf animate2" alt="">
                <img src="images/1-10.png" class="animateSelf animate3" alt="">
                <!-- <img class="animated Shake yuanpan" src="images/1-5.png"> -->
                <img class="animated Right xiaoji" src="images/1-9.png">
                <img class="animated Right xiangyun" src="images/1-6.png">
                <img class="animated ZoomIn duilian" src="images/1-8.png">
                <img class="animated Left people1" src="images/1-1.png">
                <img class="animated Right people2" src="images/1-3.png">
                <img class="animated RollIn words" src="images/1-2.png">
            </div>
            <div class="swiper-slide page2">
                <img class="animated Down logo" src="images/1-7.png">
                <img class="animated Up animateSelf animateWord words" src="images/2-2.png">
                <img class="animated Left words2" src="images/2-1.png">
            </div>
            <div class="swiper-slide page3">
                <img src="images/3-3.png" class="animateSelf piying1" alt="">
                <img src="images/3-4.png" class="animateSelf piying2" alt="">
                <img src="images/3-5.png" class="animateSelf piying3" alt="">
                <img src="images/3-6.png" class="animateSelf piying4" alt="">
                <img class="animated Right yunzi" src="images/3-2.png" alt="">
                <img class="animated Tada animateSelf animateWord words" src="images/3-1.png" alt="">
            </div>
            <div class="swiper-slide page4">
                <img src="images/4-4.png" class="animated Tada dapan" alt="">
                <img src="images/4-1.png" class="animated Left word1" alt="">
                <img src="images/4-2.png" class="animated FadeInDown kuaizi" alt="">
                <img src="images/4-3.png" class="animated Down word2" alt="">
                <img src="images/4-5.png" class="animated Up logo" alt="">
            </div>
            <div class="swiper-slide page5">
                <!-- <img src="images/2.gif" class="img1" alt="">
                <img src="images/4.gif" class="img4" alt="">
                <img src="images/5.gif" class="img5" alt=""> -->
                <img src="images/5-1.png" class="animated Up words1" alt="">
                <img src="images/5-2.png" class="animated Left words2" alt="">
                <img src="images/5-3.png" class="animated Right words3" alt="">
            </div>
            <div class="swiper-slide page6">
                <img src="images/6-4.png" class="animated Down pan" alt="">
                <img src="images/6-2.png" class="animated Left words1" alt="">
                <img src="images/6-1.png" class="animated Right words2" alt="">
                <img src="images/6-3.png" class="animated Up words3" alt="">
                <img src="images/6-21.png" class="animated FadeInDown xiangyun" alt="">
            </div>
            <div class="swiper-slide page7">
                <img src="images/61-1.png" class="animateSelf chetou pagenums" data-pagenum="0" alt="">
                <div class="chelun lun1"></div>
                <div class="chelun lun2"></div>
                <div class="chelun lun3"></div>
                <div class="chelun lun4"></div>

                <!-- 第一车厢 -->
                <img src="images/61-3.png" class="animateSelf huo1" alt="">
                <img src="images/62-1.png" class="animateSelf chexiang1 pagenums" data-pagenum="1" alt="">
                <div class="chelun lun5"></div>

                <!-- 第二车厢 -->
                <img src="images/61-4.png" class="animateSelf huo2" alt="">
                <img src="images/62-2.png" class="animateSelf chexiang2 pagenums" data-pagenum="2" alt="">
                <div class="chelun lun6"></div>

                <!-- 第三车厢 -->
                <img src="images/61-5.png" class="animateSelf huo3" alt="">
                <img src="images/62-3.png" class="animateSelf chexiang3 pagenums" data-pagenum="3" alt="">
                <div class="chelun lun7"></div>
                
                <!-- 第四车厢 -->
                <img src="images/61-6.png" class="animateSelf huo4" alt="">
                <img src="images/62-4.png" class="animateSelf chexiang4 pagenums" data-pagenum="4" alt="">
                <div class="chelun lun8"></div>

                <!-- 第五车厢 -->
                <img src="images/61-7.png" class="animateSelf huo5" alt="">
                <img src="images/62-5.png" class="animateSelf chexiang5 pagenums" data-pagenum="5" alt="">
                <div class="chelun lun9"></div>

                <!-- 第六车厢 -->
                <img src="images/62-6.png" class="animateSelf chexiang6 pagenums" data-pagenum="7" alt="">
                <div class="chelun lun10"></div>

                <!-- 云 -->
                <img src="images/61-10.png" class="animateSelf xiangyun" alt="">
                <img src="images/61-9.png" class="animateSelf xiangyun1" alt="">
                <img src="images/61-9.png" class="animateSelf xiangyun2" alt="">
                <img src="images/61-9.png" class="animateSelf xiangyun3" alt="">
                <img src="images/61-9.png" class="animateSelf xiangyun4" alt="">
                <img src="images/61-9.png" class="animateSelf xiangyun5" alt="">
                <img src="images/61-9.png" class="animateSelf xiangyun6" alt="">
                <!-- 点域 -->
                <div class="dian dian1"></div>
                <div class="dian dian2"></div>
                <div class="dian dian3"></div>
                <div class="dian dian4"></div>
                <div class="dian dian5"></div>
                <div class="dian dian6"></div>

                <!-- words -->
                <img src="images/62-7.png" class="animated Up wordsbottom" alt="">
            </div>
            <div class="swiper-slide page8">
                <div class="sections">
                    <div class="title">填写信息，抓住机遇
                        <br>惊喜在等你</div>
                    <form action="" id="p7f">
                        <div class="page-item">
                            <input name="name" type="text" placeholder="姓名">
                            <span class="error">请填写正确的姓名</span>
                        </div>
                        <div class="page-item sex-item fn-clear">
                            <div class="ele">女士</div>
                            <div class="ele2">
                                <div>
                                    <p data-val="0"></p>
                                </div>
                            </div>
                            <div class="ele">男士</div>
                            <div class="ele2">
                                <div>
                                    <p class="active" data-val="1"></p>
                                </div>
                            </div>
                            <input id="inputSex" type="hidden" name="sex" value="1">
                        </div>
                        <div class="page-item">
                            <input id="birthDate" name="birth" type="text" readonly placeholder="生日">
                            <input class="inputDate" type="date" value="2016-11-24">
                            <span class="error">请填写生日</span>
                        </div>
                        <div class="page-item">
                            <input type="text" name="phone" placeholder="联系方式">
                            <span class="error">请填写正确的手机号码</span>
                        </div>
                        <div class="btnToSubmit">提交信息</div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <img class="btnYun" src="images/1-4.png">
    <div id="audioImgId" class="audioImg active"></div>
    <audio id="audioId" src="music/index3.mp3" loop autoplay preload display='none;'></audio>
    <script src="js/swiper.min.js"></script>
    <script src="js/zepto.min.js"></script>
    <script>
    (function(win) {
        var doc = win.document;
        var docEl = doc.documentElement;
        var metaEl = doc.querySelector('meta[name="viewport"]');
        var dpr = 1;
        var scale = 1;
        var fontBase = 16;

        if (window.devicePixelRatio >= 2) {
            scale *= 0.5;
            dpr *= 2;
        }

        docEl.setAttribute('data-dpr', dpr);
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', width=device-width, maximum-scale=' + scale + ', user-scalable=no');

        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            var rem = width / 10;
            docEl.style.fontSize = rem + 'px';
        }

        var tid = null;
        win.addEventListener('resize', function() {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }, false);

        if (doc.readyState === 'complete') {
            doc.body.style.fontSize = fontBase * dpr + 'px';
        } else {
            doc.addEventListener('DOMContentLoaded', function(e) {
                doc.body.style.fontSize = fontBase * dpr + 'px';
            }, false);
        }
        refreshRem();
    })(window);
    $(function() {
        var $wrapper = $('#wrapper'),
            $page1 = $('.page1', $wrapper),
            $page2 = $('.page2', $wrapper),
            $page3 = $('.page3', $wrapper),
            $page4 = $('.page4', $wrapper),
            $page5 = $('.page5', $wrapper),
            $page6 = $('.page6', $wrapper),
            $page7 = $('.page7', $wrapper),
            $page8 = $('.page8', $wrapper);
        var $arr = [$page1, $page2, $page3, $page4, $page5, $page6, $page7,$page8];
        var animateObj = {
            Up: 'bounceInUp',
            Left: 'bounceInLeft',
            Right: 'bounceInRight',
            Down: 'bounceInDown',
            Tada: 'tada',
            Bounce: 'bounce',
            Wobble: 'wobble',
            ZoomIn: 'zoomIn',
            Shake: 'shake',
            RollIn: 'rollIn',
            FadeInDown: 'fadeInDown'
        }
        var XC = {
            init: function() {
                this.events();
                this.createSwiper();
                this.initPage7();
            },
            events: function() {
                var me = this;
                $('input.inputDate').on('input', function() {
                    $('#birthDate').val($(this).val());
                });
                $('.ele2 p').click(function() {
                    if ($(this).hasClass('active')) return;
                    $('.ele2 p').toggleClass('active');
                    $('#inputSex').val($(this).data('val'));
                });
                $('#p7f .btnToSubmit').click(function() {
                    var $form = $('#p7f'),
                        $name = $('input[name="name"]', $form),
                        $sex = $('.ele2 p.active', $form),
                        $birth = $('#birthDate'),
                        $phone = $('input[name="phone"]', $form);
                    if ($.trim($name.val()).length < 2 || $.trim($name.val()).length > 4) {
                        $name.siblings('.error').show();
                        return false;
                    } else {
                        $name.siblings('.error').hide();
                    }
                    if (!$birth.val()) {
                        $birth.siblings('.error').show();
                        return false;
                    } else {
                        $birth.siblings('.error').hide();
                    }
                    if (/^(1[35678]\d{9})$/g.test($phone.val())) {
                        $phone.siblings('.error').hide();
                    } else {
                        $phone.siblings('.error').show();
                        return false;
                    }
                    $form.submit();
                });
                $('#audioImgId').click(function(e) {
                    var $el = $(e.target);
                    var _audio = $('#audioId')[0];
                    if ($el.hasClass('active')) {
                        $el.removeClass('active');
                        _audio.pause();
                    } else {
                        $el.addClass('active');
                        _audio.play();
                    }
                });
                $('.pagenums', $page7).click(function(e){
                    var nums = $(e.target).data('pagenum');
                    me.myswiper && me.myswiper.slideTo(nums, 1000, true)
                });
            },
            initPage7: function(){
                setTimeout(function(){
                    $('.huo1', $page7).addClass('updown');
                    $('.xiangyun', $page7).addClass('xyA');
                    setTimeout(function(){
                        $('.huo2', $page7).addClass('updown');
                        $('.xiangyun1', $page7).addClass('xyA1');
                        setTimeout(function(){
                            $('.huo3', $page7).addClass('updown');
                            $('.xiangyun2', $page7).addClass('xyA2');
                            setTimeout(function(){
                                $('.huo4', $page7).addClass('updown');
                                $('.xiangyun3', $page7).addClass('xyA3');
                                setTimeout(function(){
                                    $('.huo5', $page7).addClass('updown');
                                    $('.xiangyun6', $page7).addClass('xyA6');
                                },800);
                            },800);
                        },800);
                    },800);
                });
            },
            createSwiper: function() {
                var me = this;
                me.myswiper = new Swiper('.swiper-container', {
                    direction: 'vertical',
                    loop: false,
                    effect: 'slide',
                    pagination: '.swiper-pagination',
                    onInit: function(swiper) {
                        var _curIndex = swiper.activeIndex;
                        $('.btnYun').show();
                        me.activeAnimateByIndex(0);
                    },
                    onTransitionEnd: function(swiper) {
                        var _curIndex = swiper.activeIndex;
                        if( _curIndex == 7 ){
                            $('img', $page7).hide();
                            $('div', $page7).hide();
                        }else{
                            $('img', $page7).show();
                            $('div', $page7).show();
                        }
                        me.closeAnimate();
                        setTimeout(me.activeAnimateByIndex(_curIndex), 500);
                    }
                });
            },
            closeAnimate: function() {
                for (key in animateObj) {
                    if (animateObj.hasOwnProperty(key)) {
                        $('.animated.' + key, $wrapper).hide().removeClass(animateObj[key])
                    }
                }
            },
            activeAnimateByIndex: function(i) {
                for (key in animateObj) {
                    if (animateObj.hasOwnProperty(key)) {
                        $('.animated.' + key, $arr[i]).show().addClass(animateObj[key])
                    }
                }
            }
        }
        XC.init();
    })
    </script>
</body>

</html>
